<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
</head>
<body>
    <h1>用户登录</h1>
    <form id="form-login" action="login" method="post">
        <table>
            <tr>
                <td>用户名</td>
<!--                input表单那么、需和后端参数保持一致，若不一致，需用param注解强制匹配-->
                <td>
                    <input name="username" type="text">
                    <span style="color: red" id="span-username"></span>
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input name="password" type="password">
                    <span style="color: red" id="span-password"></span>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" onclick="login()" value="登录">
                </td>
            </tr>
        </table>
    </form>
    <script type="text/javascript">
        function login(){
            // alert("登录")
            $("#span-username").empty();
            $("#span-password").empty();

            //发送ajax请求  $代表jquery对象   url:请求提交地址    data:请求参数   type:请求类型
            // dataType:当服务器响应时，响应的数据类型，常见有text，xml，json    success:当服务器响应成功（状态码为200）的回调函数
            $.ajax({
                "url":"/login",
                "data":$("#form-login").serialize(),
                "type":"post",
                "dataType":"json",
                "success":function (json){
                    if(json.state == 1){
                        alert("登录成功")
                    }else if (json.state == 2){
                        $("#span-username").html("用户名不存在")
                    }else{
                        $("#span-password").html("密码错误")
                    }
                }
            });
        }
    </script>
</body>
</html>